<template>
  <div class="income-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>收入管理</h2>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="">
          <el-input
            v-model="searchForm.customerName"
            placeholder="客户姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="searchForm.processType"
            placeholder="处理类型"
            clearable
            style="width: 200px"
          >
            <el-option label="收入" value="收入" />
            <el-option label="提取" value="提取" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.startAmount"
            placeholder="应收金额开始时间"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="searchForm.endAmount"
            placeholder="应收金额结束时间"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column prop="id" label="序号" width="80" align="center" />
        <el-table-column prop="customerName" label="客户姓名" width="120" align="center" />
        <el-table-column prop="processType" label="处理类型" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.processType === '收入' ? 'success' : 'warning'">
              {{ scope.row.processType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="processAmount" label="处理金额" width="120" align="center">
          <template #default="scope">
            <span :style="{ color: getAmountColor(scope.row.processAmount) }">
              {{ scope.row.processAmount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="180" align="center" />
        <el-table-column prop="handleAmount" label="处理金额" width="120" align="center" />
        <el-table-column prop="afterAmount" label="处理后金额" width="120" align="center">
          <template #default="scope">
            <span style="color: #409EFF">{{ scope.row.afterAmount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <div class="pagination-info">
        共{{ total }}条数据，共{{ Math.ceil(total / pageSize) }}页
      </div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        layout="prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 搜索表单数据
const searchForm = reactive({
  customerName: '',
  processType: '',
  startAmount: '',
  endAmount: ''
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    customerName: '张三',
    processType: '收入',
    processAmount: 1000,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 5000,
    afterAmount: 6000
  },
  {
    id: 2,
    customerName: '李四',
    processType: '收入',
    processAmount: 600,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 4000,
    afterAmount: 4800
  },
  {
    id: 3,
    customerName: '王五',
    processType: '收入',
    processAmount: 800,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 3000,
    afterAmount: 3800
  },
  {
    id: 4,
    customerName: '张三',
    processType: '提取',
    processAmount: 500,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 2000,
    afterAmount: 1500
  },
  {
    id: 5,
    customerName: '李四',
    processType: '提取',
    processAmount: 2000,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 3000,
    afterAmount: 1000
  },
  {
    id: 6,
    customerName: '王五',
    processType: '提取',
    processAmount: 250,
    applyTime: '2019-07-17 10:10:07',
    handleAmount: 1000,
    afterAmount: 750
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(6)

// 搜索功能
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  // 这里可以添加实际的搜索逻辑
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  console.log(`每页 ${val} 条`)
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  console.log(`当前页: ${val}`)
}

// 金额颜色处理
const getAmountColor = (amount) => {
  if (amount >= 1000) return '#67C23A'
  if (amount >= 500) return '#E6A23C'
  return '#F56C6C'
}

onMounted(() => {
  console.log('收入管理页面已加载')
})
</script>

<style scoped>
.income-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .income-management {
    padding: 10px;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 15px;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-pagination) {
  --el-pagination-font-size: 14px;
}

:deep(.el-button--primary) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>